<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js文件 可以获得Vue函数 -->
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 创建模板容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        <span>{{isHappy?"happy":"sad"}}</span>
        <script>
            //实例化Vue 还要传入配置对象
            const vm = new Vue({
                //el 容器 值是一个选择器或者一个元素 一般为id 因为是唯一的
                el: "#app",
                //data  暂时写成对象  用来存放数据 MVVM中的Model层
                data: {
                    msg: "今天学习Vue",
                    isHapp: true
                }
            })

    // 在vue挂载之后 通过vm.$el 获取到真实DOM 模板容器
        </script>


    </div>
</body>

</html>